<!--
 * @Author: licongwei
 * @Date: 2022-03-16 14:02:41
 * @FileDescription: 商超对接情况
-->
<template>
  <com-box :title="title">
    <template v-slot>
      <ul class="list">
        <li class="item" v-for="(item, index) of data" :key="index">
          <p class="name" :style="{ fontSize: item.fontSize }">
            {{ item.name }}
          </p>
          <p class="inner">
            <number-scroll
              :number="item.value"
              :color="'#b3f2ff'"
              :fontSize="22"
            ></number-scroll>
            <span class="unit">{{ item.unit }}</span>
          </p>
        </li>
      </ul>
    </template>
  </com-box>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs } from 'vue'
import httpRequest from '@/service'
import comBox from '@/components/comBox/comBox.vue'
import numberScroll from '@/components/numberScroll/numberScroll.vue'
interface IDataItem {
  name: string
  unit: string
  value: number
  fontSize: string
}
interface IState {
  title: string
  data: IDataItem[]
  getData: () => void
}
export default defineComponent({
  name: 'scdjqk',
  components: {
    comBox,
    numberScroll
  },
  setup() {
    const state: IState = reactive({
      title: '',
      data: [],
      getData: () => {
        httpRequest
          .get({ url: 'M3P1Scdjqk' })
          .then((res) => {
            state.title = res.title
            state.data = res.data.map((item: any) => {
              let fontSize = '18px'
              if (item.name.length >= 7) {
                fontSize = '16px'
              }
              return {
                ...item,
                fontSize
              }
            })
          })
          .catch(() => {
            console.log('请求失败')
          })
      }
    })
    state.getData()
    return {
      ...toRefs(state)
    }
  }
})
</script>
<style lang="less" scoped>
ul.list {
  height: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-gap: 15px 20px;
  padding: 30px 40px;
  li.item {
    background: rgba(91, 219, 246, 0.05) url('../img/scdjqk-bg.png') no-repeat;
    background-size: 100% 100%;
    color: #b3f2ff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .name {
      font-size: 18px;
      margin-bottom: 15px;
      text-align: center;
    }
    .inner {
      display: flex;
      align-items: center;
      font-size: 22px;
      font-family: 'AliHYAiHei';
      .unit {
        font-size: 22px;
        font-family: 'AliHYAiHei';
      }
    }
  }
}
</style>
